<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 二手市场</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/auth.css">
</head>
<body>
<div class="auth-container">
    <div class="auth-card">
        <h2>用户注册</h2>

        <form id="register-form">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
                <small>3-50个字符，只能包含字母、数字和下划线</small>
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
                <small>6-100个字符，必须包含大小写字母和数字</small>
            </div>

            <div class="form-group">
                <label for="email">电子邮箱</label>
                <input type="email" id="email" name="email" required>
            </div>

            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" name="phone">
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">注册</button>
            </div>
        </form>

        <div class="auth-footer">
            <p>已有账号？ <a href="login.html">立即登录</a></p>
        </div>
    </div>
</div>

<script src="js/api.js"></script>
<script src="js/utils.js"></script>
<script src="js/auth.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 注册表单提交
        document.getElementById('register-form').addEventListener('submit', async function(e) {
            e.preventDefault();

            const userData = {
                username: document.getElementById('username').value,
                password: document.getElementById('password').value,
                email: document.getElementById('email').value,
                phone: document.getElementById('phone').value,
                role: 3 // 普通用户
            };

            try {
                await register(userData);
            } catch (error) {
                // 错误已在register函数中处理
            }
        });
    });
</script>
</body>
</html>